<template>
  <div 
    class="advanced-form-item" 
    :class="{
      'advanced-form-item--error': isError,
      'advanced-form-item--success': isSuccess,
      'advanced-form-item--feedback': showFeedback
    }"
  >
    <label 
      v-if="label" 
      class="advanced-form-item__label" 
      :for="id"
      :style="labelStyle"
      :v-text="label"
    >
      <span v-if="required" class="advanced-form-item__required">*</span>
    </label>
    <div class="advanced-form-item__content">
      <slot></slot>
      <div 
        v-if="showMessage && (error || successMessage)" 
        class="advanced-form-item__message"
        :class="{
          'advanced-form-item__message--error': error,
          'advanced-form-item__message--success': successMessage
        }"
        v-text="error || successMessage"
      >
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, inject } from 'vue'

const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  id: {
    type: String,
    default: ''
  },
  required: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: ''
  },
  successMessage: {
    type: String,
    default: ''
  },
  showMessage: {
    type: Boolean,
    default: null // null表示使用form的配置
  },
  labelWidth: {
    type: String,
    default: null // null表示使用form的配置
  }
})

// 注入表单上下文
const formContext = inject('formContext', {
  labelPosition: 'left',
  labelWidth: '100px',
  showMessage: true
})

// 计算属性
const isError = computed(() => !!props.error)
const isSuccess = computed(() => !!props.successMessage)
const showFeedback = computed(() => isError.value || isSuccess.value)

// 计算是否显示消息
const showMessage = computed(() => {
  if (props.showMessage !== null) {
    return props.showMessage
  }
  return formContext.showMessage
})

// 计算标签样式
const labelStyle = computed(() => {
  const style = {}
  if (props.labelWidth !== null) {
    style.width = props.labelWidth
  } else {
    style.width = formContext.labelWidth
  }
  return style
})
</script>

<style scoped>
.advanced-form-item {
  display: flex;
  margin-bottom: var(--spacing-large);
  transition: var(--transition-fast);
}

.advanced-form-item__label {
  display: flex;
  align-items: center;
  padding-right: var(--spacing-medium);
  color: var(--color-text-primary);
  font-weight: bold;
  text-align: right;
  flex-shrink: 0;
}

.advanced-form-item__required {
  color: var(--color-danger);
  margin-left: var(--spacing-extra-small);
}

.advanced-form-item__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.advanced-form-item__message {
  margin-top: var(--spacing-extra-small);
  font-size: var(--font-size-small);
  line-height: 1.4;
}

.advanced-form-item__message--error {
  color: var(--color-danger);
}

.advanced-form-item__message--success {
  color: var(--color-success);
}

.advanced-form-item--error ::v-deep(input),
.advanced-form-item--error ::v-deep(textarea),
.advanced-form-item--error ::v-deep(select) {
  border-color: var(--color-danger);
}

.advanced-form-item--success ::v-deep(input),
.advanced-form-item--success ::v-deep(textarea),
.advanced-form-item--success ::v-deep(select) {
  border-color: var(--color-success);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .advanced-form-item {
    flex-direction: column;
    margin-bottom: var(--spacing-medium);
  }
  
  .advanced-form-item__label {
    text-align: left;
    padding-right: 0;
    margin-bottom: var(--spacing-small);
  }
}
</style>